<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student List Management</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th,
        td {
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 弹框样式 */
        .modal {
            display: none;
            /* 初始隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 300px;
        }

        .modal-content label {
            display: block;
            margin-bottom: 5px;
        }

        .modal-content input[type="text"],
        .modal-content input[type="number"],
        .modal-content select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        .modal-content button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        .modal-content button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>

    <h2>Student List Management</h2>
    <button class="openModalBtn">Add New Student</button>

    <table class="studentTable">
        <thead>
            <tr>
                <th><input type="checkbox" class="selectAll"></th>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Hobbies</th>
                <th>Age</th>
                <th>Tel</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <!-- Student rows will be added dynamically here -->
        </tbody>
    </table>

    <!-- 添加/修改学生信息的弹框 -->
    <div class="studentModal modal">
        <div class="modal-content">
            <h3 class="modalTitle">Add New Student</h3>
            <form class="studentForm">
                <input type="hidden" class="studentIdToEdit"> <!-- Hidden input to hold ID for editing -->

                <label for="studentName">Name</label>
                <input type="text" name="name" class="studentName" required>

                <label for="studentGender">Gender</label>
                <select name="gender" class="studentGender" required>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>

                <label for="studentHobbies">Hobbies</label>
                <input type="text" name="hobbies" class="studentHobbies" required>

                <label for="studentAge">Age</label>
                <input type="number" name="age" class="studentAge" required>
                <!-- 手机号 -->
                <label for="studentTel">手机号</label>
                <input type="number" name="tel" class="studentAge" required>
                <!-- 邮箱 -->
                <label for="studentEmail">邮箱</label>
                <input type="number" name="email" class="studentAge" required>

                <button type="submit" class="saveStudentBtn">Save Student</button>
            </form>
        </div>
    </div>

    <script>
        //初始学生数据
        const students = [
            { id: 1, name: 'Alice', gender: 'Female', hobbies: 'Reading', age: 20, tel: '13811345678', email: '123456789@qq.com' },
            { id: 2, name: 'Bob', gender: 'Male', hobbies: 'Sports', age: 22, tel: '13812256678', email: '128646789@qq.com' },
            { id: 3, name: 'Charlie', gender: 'Male', hobbies: 'Gaming', age: 21, tel: '13864345678', email: '121186789@qq.com' }
        ];

        let isEditing = false; //是否正在编辑表单

        // 渲染表格
        function renderTable() {
            const tbody = document.querySelector('.studentTable tbody');// 获取表格的<tbody>元素  
            tbody.innerHTML = ''; // 清空表格
            // 遍历学生数据
            students.forEach(student => {
                const row = document.createElement('tr');// 为每个学生创建一个<tr>元素  
                //内容
                row.innerHTML = `
                    <td><input type="checkbox" class="selectStudent" data-id="${student.id}"></td>
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>${student.gender}</td>
                    <td>${student.hobbies}</td>
                    <td>${student.age}</td>
                    <td>${student.tel}</td>
                    <td>${student.email}</td>
                    <td>
                        <button onclick="openEditModal(${student.id})">Edit</button>
                        <button onclick="deleteStudent(${student.id})">Delete</button>
                    </td>
                `;

                tbody.appendChild(row);//将<tr>添加到<tbody>中
            });
        }

        // 处理全选按钮的点击事件
        document.addEventListener('DOMContentLoaded', function () {
            // 获取全选按钮和所有复选框  
            const selectAllCheckbox = document.querySelector('.selectAll');
            const studentCheckboxes = document.querySelectorAll('.selectStudent');

            // 为全选按钮添加事件监听器  
            selectAllCheckbox.addEventListener('change', function () {
                // 遍历所有复选框并更新它们的选中状态  
                studentCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });

            // 为每个.selectStudent复选框添加事件监听器（只添加一次）  
            studentCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    // 当任何一个.selectStudent复选框的状态改变时，更新全选按钮的状态  
                    const allChecked = Array.from(studentCheckboxes).every(chk => chk.checked);
                    selectAllCheckbox.checked = allChecked;
                });
            });

            // 可选：页面加载时立即检查并设置全选按钮的状态  
            const initialAllChecked = Array.from(studentCheckboxes).every(chk => chk.checked);
            selectAllCheckbox.checked = initialAllChecked;
        });

        // 打开编辑学生信息的模态框（对话框）
        function openEditModal(id) {
            // 根据id查找学生信息
            const student = students.find(s => s.id === id);
            if (student) {
                // 填充模态框的表单
                document.querySelector('.modalTitle').textContent = 'Edit Student';//????
                document.querySelector('.studentIdToEdit').value = student.id;
                document.querySelector('[name="name"]').value = student.name;
                document.querySelector('[name="gender"]').value = student.gender;
                document.querySelector('[name="hobbies"]').value = student.hobbies;
                document.querySelector('[name="age"]').value = student.age;
                document.querySelector('[name="tel"]').value = student.tel;
                document.querySelector('[name="email"]').value = student.email;
                // 显示模态框
                document.querySelector('.studentModal').style.display = 'block';
                isEditing = true;// 标记为正在编辑



                // 获取表单数据  
                const newTel = document.querySelector('[name="tel"]').value;
                const newEmail = document.querySelector('[name="email"]').value;

                // 进行验证  
                if (!isValidPhoneNumber(newTel)) {
                    alert('Invalid phone number');
                    return; // 停止执行后续代码  
                }
                if (!isValidEmail(newEmail)) {
                    alert('Invalid email address');
                    return; // 停止执行后续代码  
                }
                // 封装手机号验证函数  
                function isValidPhoneNumber(tel) {
                    const telRegex = /^(?:(?:\+|00)86)?1\d{10}$/;
                    return telRegex.test(tel);
                }
                // 封装邮箱验证函数  
                function isValidEmail(email) {
                    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                    return emailRegex.test(email);
                }
            }
        }

        // 处理表单提交的事件
        document.querySelector('.studentForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止默认提交行为

            const formData = new FormData(this);// 使用FormData对象收集表单数据  FormData对象是一个内置对象，用于收集表单数据。
            // 将收集到的数据转换为对象
            const data = Object.fromEntries(formData.entries());//formData.entries()返回的是迭代器，可以通过for...of循环遍历。

            const id = document.querySelector('.studentIdToEdit').value;// 获取要编辑的学生的ID
            // 更新学生信息
            if (data.name && data.gender && data.hobbies && data.age) {
                if (isEditing) {
                    //更新现有学生信息
                    const student = students.find(s => s.id === parseInt(id));
                    if (student) {//如果isEditing为true，表示用户正在编辑一个现有学生的信息;
                        student.name = data.name;
                        student.gender = data.gender;
                        student.hobbies = data.hobbies;
                        student.age = parseInt(data.age);//确保年龄是整数
                        student.tel = data.tel;
                        student.email = data.email;
                    }
                    isEditing = false;// 更新完成后，将isEditing设置为false  

                } else {
                    // 添加一个新学生
                    students.push({
                        id: students.length ? students[students.length - 1].id + 1 : 1,
                        name: data.name,
                        gender: data.gender,
                        hobbies: data.hobbies,
                        age: parseInt(data.age),//如果isEditing为false，表示用户正在添加一个新学生.
                        tel: data.tel,
                        email: data.email
                    });
                }

                renderTable();//渲染表格
                document.querySelector('.studentModal').style.display = 'none';//隐藏模态框
                clearModal();//清空模态框
            } else {
                alert('Please fill in all fields.');//提示用户必须填写所有字段
            }
        });

        // 清除模态框
        function clearModal() {
            document.querySelector('.studentForm').reset();//重置表单
            document.querySelector('.studentIdToEdit').value = '';//清空id
        }

        //删除学生
        function deleteStudent(id) {
            const index = students.findIndex(s => s.id === id);//找到学生下标
            if (index !== -1) {
                students.splice(index, 1);//删除1个学生 从index下标开始删除
                renderTable();//重新渲染表格
            }
        }

        // 打开添加新学生的模态框
        document.querySelector('.openModalBtn').addEventListener('click', function () {
            document.querySelector('.modalTitle').textContent = 'Add New Student';
            document.querySelector('.studentModal').style.display = 'block';
            isEditing = false;
        });

        renderTable();

        // 点击模态窗口之外的任何区域，模态窗口会被关闭或隐藏
        window.onclick = function (event) {
            const modal = document.querySelector('.studentModal');
            if (event.target === modal) {
                modal.style.display = 'none';
                clearModal();
            }
        };

        // 0. 搞懂每一行代码 ，打上注释✔
        // 1. 修正模态框布局样式和整体bug样式，尽量让按钮 Input框美观些（1）提示：盒子模型计算✔
        // 2. 学生信息增加手机号和邮箱字段列 并在添加和修改的时候验证手机号和邮箱格式-正则
        // 3. 学生信息增加 创建时间和修改时间列 格式【YYYY-MM-DD HH:mm:ss】
        // 4. 列表的右上角增加 input框，搜索按钮，可以使用 name 检索数据，无检索关键词直接点击搜索按钮则默认检索所有数据
        // 5. 讲学生信息存入 localStorage ，使用JSON格式，关闭打开浏览器数据依然在
        // 6. 多选按钮样式和实际选择数据同步（可放最后）✔

    </script>

</body>

</html>